<template>
<div>
    <div class="info">
        <div class="title">
            <span>编辑个人资料</span>
        </div>
        <hr/>
        <div class="personal">
            <el-form :model="registerForm" ref="registerForm" label-width="70px" class="demo-ruleForm" :rules="rules">
                <el-form-item prop="name" label="用户名">
                    <el-input v-model="registerForm.name" placeholder="用户名"></el-input>
                    <el-button type="warning" @click="changeName">修改</el-button>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input type="password" v-model="registerForm.password" placeholder="密码"></el-input>
                  <el-button type="warning" @click="changePassword">修改</el-button>
                </el-form-item>
                <el-form-item prop="sex" label="性别">
                    <el-radio-group v-model="registerForm.sex">
                        <el-radio :label="0">女</el-radio>
                        <el-radio :label="1">男</el-radio>
                    </el-radio-group>
                  <el-button type="warning" @click="changeSex">修改</el-button>
                </el-form-item>
                <el-form-item prop="phone" label="手机">
                    <el-input v-model="registerForm.phone" placeholder="手机"></el-input>
                  <el-button type="warning" @click="changePhone">修改</el-button>
                </el-form-item>
                <el-form-item prop="money" label="余额">
                    <el-input v-model="registerForm.money" placeholder="余额"></el-input>
                  <el-button type="warning" @click="changeMoney">充值</el-button>
                </el-form-item>
                <el-form-item prop="age" label="年龄">
                  <el-input v-model="registerForm.age" placeholder="年龄"></el-input>
                  <el-button type="warning" @click="changeAge">修改</el-button>
                </el-form-item>
                <el-form-item prop="intro" label="个人简介">
                    <el-input v-model="registerForm.intro" placeholder="个人简介"></el-input>
                  <el-button type="warning" @click="changeIntro">修改</el-button>
                </el-form-item>
                <el-form-item prop="address" label="地址">
                  <el-input v-model="registerForm.address" placeholder="地址"></el-input>
                  <el-button type="warning" @click="changeAddress">修改</el-button>
                </el-form-item>
              <el-form-item prop="headUrl" label="头像地址">
                <el-input v-model="registerForm.headUrl" placeholder="头像地址"></el-input>
                <el-upload
                  class="upload-demo"
                  action="http://60.205.253.99:7654/upload"
                  :on-success="UploadSuccess"
                  multiple>
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-button type="warning" @click="changeHeadurl">修改</el-button>
              </el-form-item>

            </el-form>
<!--            <div class="btn">-->
<!--                <div @click="saveMsg">保存</div>-->
<!--                <div @click="goback(-1)">取消</div>-->
<!--            </div>-->
        </div>

    </div>
</div>
</template>
<script>
import {mapGetters} from 'vuex'
import {rules,cities} from '../assets/data/form'
import {mixin} from '../mixins'
import {getUserOfId,updateUserMsg} from '../api/index'
import {usermation,changeUserName,userChangePasswordInterface,ChangeSexInterface,ChangePhoneInterface} from "../api/user";
import {rechargeInterface,ChangeAgeInterface,modifySelfAddress,ChangeHeadurlInterface,ChangeIntroInterface} from "../api/user";

export default {
  name: 'info',
  mixins: [mixin],
  data() {
    return {
      registerForm: {
        name: '',       //用户名
        password: '',       //密码
        sex: 0,            //性别
        phone: '',       //手机
        money: 0,          //余额
        age: 18,          //年龄
        intro: '',   //个人简介
        address: '',      //家庭地址
        headUrl: '',   //头像
      },
      cities: [],            //所有的地区--省
      rules: {} ,              //表单提交的规则
      oneString:{
        text:"",
      },
      zqh:"",
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created() {
    this.rules = rules;
    this.cities = cities;
  },
  mounted() {
    this.getMsg();
  },
  methods: {
    getMsg() {
      usermation().then(res => {
        if (res.data.code == 200) {
          this.registerForm.name = res.data.obj.name;
          this.registerForm.password = res.data.obj.password;
          this.registerForm.sex = res.data.obj.sex;
          this.registerForm.phone = res.data.obj.phone;
          this.registerForm.money = res.data.obj.money;
          this.registerForm.age = res.data.obj.age;
          this.registerForm.intro = res.data.obj.intro;
          this.registerForm.address = res.data.obj.address;
          this.registerForm.headUrl = res.data.obj.headUrl;
        }
      })
    },
    saveMsg() {
      let _this = this;
      let d = new Date(this.registerForm.birth);
      let datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
      let params = new URLSearchParams();
      params.append('id', this.userId);
      params.append('username', this.registerForm.username);
      params.append('password', this.registerForm.password);
      params.append('sex', this.registerForm.sex);
      params.append('phoneNum', this.registerForm.phoneNum);
      params.append('email', this.registerForm.email);
      params.append('birth', datetime);
      params.append('introduction', this.registerForm.introduction);
      params.append('location', this.registerForm.location);
      updateUserMsg(params)
        .then(res => {
          if (res.code == 1) {
            _this.$store.commit('setUsername', this.registerForm.username);
            _this.notify('修改成功', 'success');
            setTimeout(function () {
              _this.$router.push({path: '/'});
            }, 2000);
          } else {
            _this.notify('修改失败', 'error');
          }
        })
        .catch(err => {
          _this.notify('修改失败', 'error');
        })
    },
    goback(index) {
      this.$router.go(index);
    },
    //文件上传成功
    UploadSuccess(response) {
      // console.log(this.registerForm.headUrl)
      // console.log(response.obj)
      if (response.code == 200) {
        // this.registerForm.headurl = response.obj;
        this.zqh = response.obj;
        // console.log(this.registerForm.headUrl)
      }
      // console.log(this.zqh)
    },
    //修改用户名
    changeName(){
      let _this = this;
      changeUserName(this.registerForm.name).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          _this.$store.commit('setUsername', this.registerForm.username);
          this.getMsg();
        }else {
          this.$message.error(res.data.message)
        }
      })

    },
    //修改密码
    changePassword(){
      userChangePasswordInterface(this.registerForm.password).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }else {

        }
      }).catch(error=>{
        this.$message.error("修改密码失败")
      })
    },
    //修改性别
    changeSex(){
      ChangeSexInterface(this.registerForm.sex).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }
      }).catch(error=>{
        this.$message.error("修改性别失败")
      })
    },
    //修改电话号码
    changePhone(){
      ChangePhoneInterface(this.registerForm.phone).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }else {
          this.$message.error(res.data.message)
        }
      }).catch(error=>{
        this.$message.error("修改密码失败")
      })
    },
    //充值接口
    changeMoney(){
      rechargeInterface(this.registerForm.money).then(res=>{
        if (res.data.code ==200){
          this.$message.success(res.data.message)
          this.getMsg();
        }
      }).catch(error=>{
        this.$message.error("充值失败")
      })
    },
    //修改年龄
    changeAge(){
      ChangeAgeInterface(this.registerForm.age).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }
      }).catch(error=>{
        this.$message.error("修改年纪失败")
      })
    },
    //修改地址
    changeAddress(){
      modifySelfAddress(this.registerForm.address).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }
      }).catch(error=>{
        this.$message.error("修改地址失败")
      })
    },
    //修改头像
    changeHeadurl(){
      let _this = this;
      ChangeHeadurlInterface(this.zqh).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          _this.$store.commit('setAvator',this.zqh);
          this.getMsg();
        }
      }).catch(error=>{
        this.$message.error("修改头像失败")
      })
    },
    //修改简介
    changeIntro(){
      ChangeIntroInterface(this.registerForm.intro).then(res=>{
        if (res.data.code == 200){
          this.$message.success(res.data.message)
          this.getMsg();
        }
      })
  },
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/info.scss';
</style>
